<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      //   数据代理: 一个对象代理另一个对象身上的数据(data这个对象有数据,proxy这个对象没有数据,数据代理既是把data的数据代理到proxy对象的身上)
      // 在vue中.其实就是vue的实例代理了配置对象中data的数据
      let name = 'zs'
      const data = {}
      const proxy = {}

      // 数据代理实现
      Object.defineProperty(proxy, 'name', {
        get() {
          return data.name
        },
        set(value) {
          data.name = value
        },
      })

      // console.log(data, proxy)

      //   数据劫持: 要监听data中name这个数据什么时候被访问了,什么时候被修改了
      Object.defineProperty(data, 'name', {
        get() {
          console.log('监听到data的name属性被访问了')
          return name
        },
        set(value) {
          console.log('监听到data的name属性被修改了')
          name = value
        },
      })

      console.log(proxy.name)
      proxy.name = 'ls'
      console.log(data, proxy)
    </script>
  </body>
</html>
